<template>
    <div class="view-wrapper">
      <div class="listBox">
        <div class="listBox_head">
          <el-button type="primary" style="margin: 10px 0 20px" @click="addClick">新增直播间</el-button>
        </div>
        <el-table v-loading="loading" ref="multipleTable" :data="tabList" stripe border tooltip-effect="dark" style="width: 100%">
          <el-table-column label="序号" align="center" type="index" width="64px" />
          <el-table-column label="直播间名称" align="center" prop="name"></el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="200">
            <template slot-scope="scope">
              <el-button type="text" @click="editClick(scope.row)">编辑</el-button>
              <!-- <el-button type="text" @click="deleteClick(scope.row)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList"></pagination>
      </div>
      <!-- 新增 -->
      <AddDialog v-if="dialogVisible" :id="dialogId" :pathType="pathType" :visible.sync="dialogVisible" @success="_handleSuccess">
      </AddDialog>
    </div>
  </template>
  
  <script>
    import {
        liveRoomLs,deleteLiveRoom
    } from "@/api/customer/setting";
    import AddDialog from "./components/addDialog";
    export default {
      name: "",
      components: {
        AddDialog,
      },
      data() {
        return {
          dialogId: '',
          dialogVisible: false,
          // 遮罩层
          loading: false,
          // 导出遮罩层
          // 总条数
          total: 0,
          //表格数据
          tabList: [],
          pathType: 'add',
          date: [],
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
          },
        };
      },
      computed: {
        ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
      },
      created() {
        this.getList();
      },
      methods: {
        /** 查询列表 */
        getList() {
          this.loading = true;
          liveRoomLs(this.queryParams).then(response => {
            this.tabList = response.result.records;
            this.total = response.result.total;
            this.loading = false;
          });
        },
        // 表单重置
        reset() {
          this.date = []
          this.queryParams = {
            pageNum: 1,
            pageSize: 10,
          };
          this.resetForm("queryParams");
          this.handleQuery()
        },
        //新增
        addClick() {
          this.dialogVisible = true;
          this.pathType = 'add'
        },
        //编辑
        editClick(row){
          this.dialogId = row.id
          this.pathType = 'edit'
          this.dialogVisible = true;
        },
        //删除
        deleteClick(row){
            this.$confirm('确认删除相关信息?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteLiveRoom(row.id).then(res => {
                    this.$message.success('删除成功')
                    this.getList();
                }).catch(()=>{})
            }).catch(() => {});
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          // this.resetForm("queryForm");
          this.reset();
        },
        _handleSuccess(e) {
          //成功回调
          this.resetQuery()
          this.getList()
        },
        
      }
    };
  
  </script>
  <style scoped>
    .head {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      padding: 20px 20px 0;
    }
  
    .listBox {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      padding: 20px 20px;
      margin-top: 10px;
    }
  
    .listBox_head {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  
    .img_box {
      width: 100px;
      height: 80px;
      border-radius: 4px;
    }
  
  </style>
    